import QtQuick 2.15
import QtQuick.Shapes 1.15

Item {
    id: root
    objectName: "Wheel"
    property int radius: 50
    property point center: Qt.point(0, 0)
    property real rotationSpeed: 1.0
    property int holeRadius: 5
    property color holeColor: "black"
    property real holeDistance: 0
    property real currentRotation: needle.rotation
    width: radius * 2
    height: radius * 2

    property alias innerHole: hole

    function holeCenterInWheel() {
        return circle.mapToItem(root, hole.x + hole.radius, hole.y + hole.radius);
    }

    Rectangle {
        id: circle
        width: root.radius * 2
        height: root.radius * 2
        x: root.center.x - root.radius
        y: root.center.y - root.radius
        radius: root.radius
        color: "transparent"
        border.color: "red"
        border.width: 3
        
        property point wheelCenter: Qt.point(width/2, height/2)

        Rectangle {
            id: hole
            width: holeRadius * 2
            height: holeRadius * 2
            radius: holeRadius
            color: holeColor
            
            function updateHolePosition() {
                var maxDistance = Math.max(0, root.radius - holeRadius)
                if(holeDistance > maxDistance) {
                    holeDistance = maxDistance
                }
                var angle = needle.rotation * Math.PI/180
                x = parent.wheelCenter.x + Math.cos(angle) * holeDistance - holeRadius
                y = parent.wheelCenter.y + Math.sin(angle) * holeDistance - holeRadius
                radiusCanvas.requestPaint()
            }
            
            Component.onCompleted: updateHolePosition()
        }

        Canvas {
            id: radiusCanvas
            anchors.fill: parent
            
            onPaint: {
                var ctx = getContext("2d")
                ctx.clearRect(0, 0, width, height)
                ctx.beginPath()
                ctx.moveTo(width/2, height/2)
                ctx.lineTo(hole.x + holeRadius, hole.y + holeRadius)
                ctx.strokeStyle = "purple"
                ctx.lineWidth = 2
                ctx.stroke()
            }
        }

        Rectangle {
            id: needle
            width: 3
            height: radius
            color: "black"
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            transformOrigin: Item.Bottom
            property real rotation: 0
        }

        RotationAnimation {
            id: rotationAnim
            target: needle
            property: "rotation"
            from: 0
            to: 360
            duration: 1000 / rotationSpeed
            loops: Animation.Infinite
            running: true
        }

        Timer {
            interval: 16
            running: true
            repeat: true
            onTriggered: hole.updateHolePosition()
        }

        Connections {
            target: root
            function onHoleDistanceChanged() { hole.updateHolePosition() }
            function onHoleRadiusChanged() { hole.updateHolePosition() }
            function onRotationSpeedChanged() { 
                rotationAnim.duration = 1000 / rotationSpeed 
                hole.updateHolePosition()
            }
        }
    }
}